<template>
    <div class="authority">
        <div class="gva-search-box">
            <el-form ref="searchForm" :inline="true">
                <el-form-item label="行政区划">
                    <el-cascader style="width: 90%" :options="areaList" :props="props1" v-model="searchPids"
                        @change="searchAreaChange" />
                </el-form-item>
                <el-form-item label="楼栋名称">
                    <el-input v-model="searchInfo.name" style="width:170px" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="详细地址">
                    <el-input v-model="searchInfo.address" style="width:170px" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="楼栋用途">
                    <el-select v-model="searchInfo.buildingUse" placeholder="请选择" style="width:170px">
                        <el-option v-for="item in buildingUses" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item style="margin-right: 0;">
                    <el-button type="primary" icon="search" @click="onSubmit">
                        查询
                    </el-button>
                    <el-button icon="refresh" @click="onReset">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="gva-table-box unit">
            <div class="header">
                <div class="left">
                    <div class="result">结果</div>
                    <div>办公楼总数:<span class="blue">{{ total }}</span>栋</div>
                </div>
                <div class="right">
                    <el-button type="primary" icon="plus" @click="addLouDong">新增办公楼</el-button>
                </div>
            </div>
            <div class="list">
                <div class="item" v-for="item in tableData">
                    <img v-if="item.picture" :src="item.picture" alt="" class="left">
                    <img v-else src="@/assets/no-loudong.png" alt="" class="left">
                    <div class="right">
                        <div class="area-title">
                            <div class="top-title">
                                <span style="margin-right: 6px;">{{ item.name }}</span>
                                <span style="color: #303133;font-weight: normal;">({{ item.areaAddress }})</span>
                            </div>
                            <el-button type="primary" @click="openCard(item)">楼栋卡片 ></el-button>
                        </div>
                        <div class="info-block">
                            <div class="info-item">
                                <div class="label">总建筑面积：</div>
                                <div class="info">{{ item.totalArea }}<span class="unit">m²</span></div>
                            </div>
                            <div class="info-item">
                                <div class="label">建设年代：</div>
                                <div class="info">{{ item.createYear }}</div>
                            </div>
                            <div class="info-item">
                                <div class="label">权属登记情况：</div>
                                <div class="info">{{ qsdjList[item.ownership-1].name }}</div>
                            </div>
                            <div class="info-item">
                                <div class="label">配置来源：</div>
                                <div class="info">{{ sources[item.source - 1].label }}</div>
                            </div>
                        </div>
                        <div class="info-block">
                            <div class="info-item">
                                <div class="label">楼栋分类：</div>
                                <div class="info">{{ item.buildingType == 1 ? '使用' : '储备' }}</div>
                            </div>
                            <div class="info-item">
                                <div class="label">是否有电梯：</div>
                                <div class="info">{{ item.lift == 1 ? '是' : '否' }}</div>
                            </div>
                            <div class="info-item">
                                <div class="label">楼栋用途：</div>
                                <div class="info">{{ formattedYt(item.buildingUse) }}</div>
                            </div>
                            <div class="info-item">
                                <div class="label">办公楼结构：</div>
                                <div class="info">{{ buildingStructs[item.buildingStruct - 1].label }}</div>
                            </div>
                        </div>
                        <div class="info-block">
                            <div class="info-item">
                                <div class="label">楼层：</div>
                                <div class="info">共 {{ item.totalFloor }} 层（地上 {{ item.overgroundFloor }} 层，地下 {{
                                    item.undergroundFloor }} 层）</div>
                            </div>
                            <div class="info-item">
                                <div class="label">是否测绘：</div>
                                <div class="info"></div>
                            </div>
                            <div class="info-item">
                                <div class="label">总使用面积：</div>
                                <div class="info">{{ item.totalUseArea }}<span class="unit">m²</span></div>
                            </div>
                            <div class="info-item">
                                <div class="label">建筑使用系数：</div>
                                <div class="info"></div>
                            </div>
                        </div>
                        <div class="link-tile-list">
                            <div class="link-tile" @click="editLouDong(item)">基本信息</div>
                            <div class="link-tile" @click="openQuanShu(item.id)">权属信息</div>
                            <div class="link-tile" @click="openWeiZhi(item)">位置信息</div>
                            <div class="link-tile" @click="openWaiGuan(item)">外观图</div>
                            <div class="link-tile" @click="openLouCeng(item.id)">楼层信息</div>
                            <div class="link-tile" @click="openFangJian(item.id)">房间信息</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="gva-pagination">
                <el-pagination v-model:current-page="page" :page-size="pageSize" :total="total"
                    layout="prev, pager, next" @current-change="handleCurrentChange" />
            </div>
        </div>
        <!-- 新增楼栋 -->
        <el-drawer v-model="dialogFormVisible" :size="appStore.drawerSize" :before-close="handleClose"
            :show-close="false" class="loudong-drawer">
            <template #header>
                <div class="flex justify-between items-center">
                    <span class="text-lg">{{ dialogTitle }}</span>
                    <div>
                        <el-button @click="closeDialog"> 取 消 </el-button>
                        <el-button type="danger" @click="delLouDong">删除</el-button>
                        <el-button type="primary" @click="enterDialog">确定</el-button>
                    </div>
                </div>
            </template>
            <el-form v-if="dialogFormVisible" ref="loudongForm" label-width="150" :model="form" :rules="rules">
                <div class="section-title">办公楼基本信息</div>
                <el-form-item label="所属办公区域" prop="areaId">
                    <el-select v-model="form.areaId" placeholder="请选择" style="width: 360px" @change="changeArea">
                        <el-option v-for="item in qyList" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="详细地址" prop="address">
                    <el-input disabled v-model="form.address" placeholder="请输入" style="width: 360px" />
                </el-form-item>
                <el-form-item label="是否为主楼">
                    <el-radio-group v-model="form.main">
                        <el-radio :label="1" size="large">是</el-radio>
                        <el-radio :label="2" size="large">否</el-radio>
                    </el-radio-group>
                    <span style="margin-left: 4px;color: #FF473E;">注：主楼（无）</span>
                </el-form-item>
                <el-form-item label="办公楼名称" prop="name">
                    <el-input v-model="form.name" placeholder="请输入" style="width: 360px" />
                </el-form-item>
                <el-form-item label="楼栋号" prop="buildingNo">
                    <el-input v-model="form.buildingNo" placeholder="请输入" style="width: 360px" />
                    <span style="margin-left: 4px;">栋</span>
                </el-form-item>
                <el-form-item label="单元号" prop="unitNo">
                    <el-input v-model="form.unitNo" placeholder="请输入" style="width: 360px" />
                    <span style="margin-left: 4px;">号</span>
                </el-form-item>
                <el-form-item label="办公楼所属行政区划" prop="administrative">
                    <el-cascader style="width: 360px" :options="areaList" :props="props1" v-model="pids"
                        @change="areaChange" />
                </el-form-item>
                <el-form-item label="权属登记情况" prop="ownership">
                    <el-select v-model="form.ownership" placeholder="请选择" style="width: 360px">
                        <el-option v-for="item in qsdjList" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="建设年代" prop="createYear">
                    <el-input v-model.number="form.createYear" placeholder="请输入" style="width: 360px" />
                    <span style="margin-left: 4px;">年</span>
                </el-form-item>
                <el-form-item label="配置来源">
                    <el-radio-group v-model="form.source">
                        <el-radio v-for="item in sources" :value="item.value" size="large">{{ item.label }}</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="楼栋分类">
                    <el-radio-group v-model="form.buildingType">
                        <el-radio :value="1" size="large">使用</el-radio>
                        <el-radio :value="2" size="large">储备</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="楼栋用途（多选）" prop="buildingUse">
                    <el-checkbox-group v-model="form.buildingUse">
                        <el-checkbox v-for="item in buildingUses" :label="item.label" :value="item.value" />
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="办公楼结构">
                    <el-radio-group v-model="form.buildingStruct">
                        <el-radio v-for="item in buildingStructs" :value="item.value" size="large">{{ item.label
                            }}</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="是否有电梯">
                    <el-radio-group v-model="form.lift">
                        <el-radio :value="1" size="large">是</el-radio>
                        <el-radio :value="2" size="large">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="资产价值">
                    <el-input v-model="form.assetValue" placeholder="请输入" style="width: 360px" />
                </el-form-item>
                <div class="section-title">办公楼结构信息</div>
                <el-form-item label="楼栋标签">
                    <el-radio-group v-model="form.tag">
                        <el-radio :value="1" size="large">独栋独有</el-radio>
                        <el-radio :value="2" size="large">部分楼层</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="楼层位置" prop="floorPosition" v-if="form.tag == 2">
                    <el-input v-model="form.floorPosition" placeholder="请输入" style="width: 360px" />
                    <span style="margin-left: 4px;">平方米</span>
                </el-form-item>
                <el-form-item label="总建筑面积" prop="totalArea">
                    <el-input v-model="form.totalArea" placeholder="请输入" style="width: 360px" />
                    <span style="margin-left: 4px;">平方米</span>
                </el-form-item>
                <div style="color: #FF473E;margin: 0px 0 10px 160px;">注：总建筑面积是指在建设用地范围内单栋或多栋建筑物地面以上及地面以下各层建筑面积之和</div>
                <el-form-item label="总使用面积" prop="totalUseArea">
                    <el-input v-model="form.totalUseArea" placeholder="请输入" style="width: 360px" />
                    <span style="margin-left: 4px;">平方米</span>
                </el-form-item>
                <el-form-item label="占地面积" prop="coverArea">
                    <el-input v-model="form.coverArea" placeholder="请输入" style="width: 360px" />
                    <span style="margin-left: 4px;">平方米</span>
                </el-form-item>
                <div style="color: #FF473E;margin: 0px 0 10px 160px;">注：占地面积是指经规划许可和施工许可的建筑物实际占用土地的面积</div>
                <el-form-item label="地上层数" prop="overgroundFloor">
                    <el-input v-model.number="form.overgroundFloor" :disabled="form.overgroundFloor != ''"
                        placeholder="请输入" style="width: 360px" />
                    <span style="margin-left: 4px;">层</span>
                    <span style="margin-left: 20px;color: #FF473E;">注：楼层数据初始化后不可更改</span>
                </el-form-item>
                <el-form-item label="地下层数" prop="undergroundFloor">
                    <el-input v-model.number="form.undergroundFloor" :disabled="form.undergroundFloor != ''"
                        placeholder="请输入" style="width: 360px" />
                    <span style="margin-left: 4px;">层</span>
                    <span style="margin-left: 20px;color: #FF473E;">注：楼层数据初始化后不可更改</span>
                </el-form-item>
                <el-form-item label="总层数">
                    <el-input :value="totalFloor" style="width: 360px" disabled />
                    <span style="margin-left: 4px;">层</span>
                </el-form-item>
            </el-form>
        </el-drawer>
        <!-- 权属信息列表 -->
        <el-drawer v-model="quanshuDialog" :size="1000" :before-close="handleClose2" :show-close="false"
            class="loudong-drawer">
            <template #header>
                <div class="flex justify-between items-center">
                    <span class="text-lg">权属信息</span>
                    <div>
                        <el-button @click="quanshuDialog = false">取消</el-button>
                        <el-button type="primary" @click="addQuanShu">新增</el-button>
                    </div>
                </div>
            </template>
            <div class="section-title">证书信息</div>
            <el-table :data="quanshuData" row-key="id">
                <el-table-column type="index" label="序号" width="100" />
                <el-table-column align="left" label="产权证号" prop="certificateNo" show-overflow-tooltip></el-table-column>
                <el-table-column align="left" label="权利人" prop="obligee"></el-table-column>
                <el-table-column align="left" label="共有情况">
                    <template #default="scope">
                        <span>{{ scope.row.commonSituation == 1 ? '共同共有' : '单独所有' }}</span>
                    </template>
                </el-table-column>
                <el-table-column align="left" label="不动产单元号" prop="realEstateUnitNo"></el-table-column>
                <el-table-column align="left" fixed="right" label="操作" min-width="100">
                    <template #default="scope">
                        <el-button type="primary" link icon="edit" @click="editQuanShu(scope.row)">
                            编辑
                        </el-button>
                        <el-button type="danger" link icon="delete" @click="delQuanShu(scope.row)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-drawer>

        <!-- 新增权属信息 -->
        <el-drawer v-model="quanshuVisible" :size="1000" :before-close="handleClose3" :show-close="false"
            class="loudong-drawer">
            <template #header>
                <div class="flex justify-between items-center">
                    <span class="text-lg">{{ quanshuTitle }}</span>
                    <div>
                        <el-button @click="closeDialog3"> 取 消 </el-button>
                        <el-button type="primary" @click="enterDialog3"> 确 定 </el-button>
                    </div>
                </div>
            </template>
            <el-form v-if="quanshuVisible" ref="quanshuForm" label-width="150" :model="quanshuForms"
                :rules="quanshuRules">
                <div class="quanshu-top">
                    <div class="section-title">
                        <div>不动产权证信息</div>
                    </div>
                    <div style="color: #ff6666;">注：基本信息(按《不动产权证书》证书上的信息填写)</div>
                </div>
                <el-form-item label="产权证号" prop="certificateNo">
                    <el-input v-model="quanshuForms.certificateNo" placeholder="请输入" style="width: 360px" />
                    <span style="margin-left: 4px;color: #FF473E;">如：渝2023 xx市不动产权第0000001号</span>
                </el-form-item>
                <el-form-item label="权利人" prop="obligee">
                    <el-input v-model="quanshuForms.obligee" placeholder="请输入" style="width: 360px" />
                </el-form-item>
                <el-form-item label="共有情况" prop="commonSituation">
                    <el-select v-model="quanshuForms.commonSituation" placeholder="请选择" style="width: 360px">
                        <el-option label="共同共有" :value="1" />
                        <el-option label="单独所有" :value="2" />
                    </el-select>
                </el-form-item>
                <el-form-item label="不动产单元号">
                    <el-input v-model="quanshuForms.realEstateUnitNo" placeholder="请输入" style="width: 360px" />
                </el-form-item>
                <el-form-item label="权利类型">
                    <el-input v-model="quanshuForms.rightType" placeholder="请输入" style="width: 360px" />
                </el-form-item>
                <el-form-item label="权利性质">
                    <el-input v-model="quanshuForms.rightNature" placeholder="请输入" style="width: 360px" />
                </el-form-item>
                <el-form-item label="用途">
                    <el-input v-model="quanshuForms.purpose" placeholder="请输入" style="width: 360px" />
                </el-form-item>
                <el-form-item label="土地使用权面积">
                    <el-input v-model="quanshuForms.landUseRightArea" placeholder="请输入" style="width: 360px" />
                    <span style="margin-left: 4px;">单位：平方米</span>
                </el-form-item>
                <el-form-item label="房屋建筑面积" prop="buildingArea">
                    <el-input v-model="quanshuForms.buildingArea" placeholder="请输入" style="width: 360px" />
                    <span style="margin-left: 4px;">单位：平方米</span>
                </el-form-item>
                <el-form-item label="使用期限">
                    <el-input v-model="quanshuForms.serviceLife" placeholder="请输入" style="width: 360px" />
                    <span style="margin-left: 4px;color: #FF473E;">注：请填写使用期限</span>
                </el-form-item>
                <el-form-item label="权利其他状况">
                    <el-input v-model="quanshuForms.otherRight" type="textarea" :rows="6" style="width: 400px;" />
                </el-form-item>
                <div class="section-title">附件信息</div>
                <el-form-item label="产权证">
                    <el-upload v-model:file-list="fileList1" :action="adminUrl" :on-success="uploadSuccess1"
                        :headers="headerOdj" list-type="picture-card">
                        <el-icon>
                            <Plus />
                        </el-icon>
                        <template #file="{ file }">
                            <div>
                                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                                <span class="el-upload-list__item-actions">
                                    <span class="el-upload-list__item-delete" @click="handleRemove1(file)">
                                        <el-icon>
                                            <Delete />
                                        </el-icon>
                                    </span>
                                </span>
                            </div>
                        </template>
                    </el-upload>
                </el-form-item>
                <el-form-item label="宗地图">
                    <el-upload v-model:file-list="fileList2" :action="adminUrl" :on-success="uploadSuccess2"
                        :headers="headerOdj" list-type="picture-card">
                        <el-icon>
                            <Plus />
                        </el-icon>
                        <template #file="{ file }">
                            <div>
                                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                                <span class="el-upload-list__item-actions">
                                    <span class="el-upload-list__item-delete" @click="handleRemove2(file)">
                                        <el-icon>
                                            <Delete />
                                        </el-icon>
                                    </span>
                                </span>
                            </div>
                        </template>
                    </el-upload>
                </el-form-item>
                <el-form-item label="分户图">
                    <el-upload v-model:file-list="fileList3" :action="adminUrl" :on-success="uploadSuccess3"
                        :headers="headerOdj" list-type="picture-card">
                        <el-icon>
                            <Plus />
                        </el-icon>
                        <template #file="{ file }">
                            <div>
                                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                                <span class="el-upload-list__item-actions">
                                    <span class="el-upload-list__item-delete" @click="handleRemove3(file)">
                                        <el-icon>
                                            <Delete />
                                        </el-icon>
                                    </span>
                                </span>
                            </div>
                        </template>
                    </el-upload>
                </el-form-item>
                <el-form-item label="二维码">
                    <el-upload v-model:file-list="fileList4" :action="adminUrl" :on-success="uploadSuccess4"
                        :headers="headerOdj" list-type="picture-card">
                        <el-icon>
                            <Plus />
                        </el-icon>
                        <template #file="{ file }">
                            <div>
                                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                                <span class="el-upload-list__item-actions">
                                    <span class="el-upload-list__item-delete" @click="handleRemove4(file)">
                                        <el-icon>
                                            <Delete />
                                        </el-icon>
                                    </span>
                                </span>
                            </div>
                        </template>
                    </el-upload>
                </el-form-item>
            </el-form>
        </el-drawer>

        <!-- 新增外观图 -->
        <el-drawer v-model="waiguanVisible" :size="appStore.drawerSize" :before-close="handleClose4" :show-close="false"
            class="loudong-drawer">
            <template #header>
                <div class="flex justify-between items-center">
                    <span class="text-lg">外观图</span>
                    <div>
                        <el-button @click="closeDialog4">取消</el-button>
                        <el-button type="primary" @click="enterDialog4">确定</el-button>
                    </div>
                </div>
            </template>
            <el-form v-if="waiguanVisible" ref="waiguanForm" label-width="150" :model="waiguanForms"
                :rules="waiguanRules">
                <el-form-item label="办公楼图片" prop="picture">
                    <el-upload v-model:file-list="fileList5" :action="adminUrl" :on-success="uploadSuccess5"
                        :headers="headerOdj" list-type="picture-card" :on-preview="handlePicturePreview">
                        <el-icon>
                            <Plus />
                        </el-icon>
                    </el-upload>
                    <el-dialog v-model="dialogVisible">
                        <img w-full :src="dialogImageUrl" alt="Preview Image" />
                    </el-dialog>
                </el-form-item>
            </el-form>
        </el-drawer>

        <!-- 楼层信息列表 -->
        <el-drawer v-model="loucengDialog" :size="1000" :before-close="handleClose5" :show-close="false"
            class="loudong-drawer">
            <template #header>
                <div class="flex justify-between items-center">
                    <span class="text-lg">楼层信息</span>
                    <div>
                        <el-button @click="loucengDialog = false">取消</el-button>
                    </div>
                </div>
            </template>
            <div class="quanshu-top">
                <div class="section-title">
                    <div>机场分局办公楼门楼</div>
                </div>
                <div style="color: #ff6666;font-size: 16px;">注：图片文件类型为办公楼楼层SVG图，图片文件格式为svg格式</div>
            </div>
            <el-table :data="loucengData" row-key="id">
                <el-table-column type="index" label="序号" width="100" />
                <el-table-column align="left" label="楼层" prop="floor"></el-table-column>
                <el-table-column align="left" label="操作">
                    <template #default="scope">
                        <div style="display: flex;">
                            <span v-if="scope.row.status == 1" style="color:#4E7DF7;cursor: pointer;"
                                @click="downloadImg(scope.row.picture)">下载</span>
                            <span v-if="scope.row.status == 1" style="color:#4E7DF7;cursor: pointer;margin: 0 6px;"
                                @click="yulan(scope.row.picture)">预览</span>
                            <!-- <el-image :ref="`imageRef${scope.roe.id}`" style="width: 100px; height: 100px" :src="scope.row.pictire"
                                :preview-src-list="srcList" fit="cover" /> -->
                            <el-upload v-model:file-list="fileList6" :action="adminUrl"
                                :on-success="(e) => uploadSuccess6(e, scope.row)" :headers="headerOdj">
                                <span style="color:#4E7DF7;cursor: pointer;">上传</span>
                            </el-upload>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column align="left" label="状态">
                    <template #default="scope">
                        <span v-if="scope.row.status == 0" style="color: red;">未上传</span>
                        <span v-else style="color: green;">已上传</span>
                    </template>
                </el-table-column>
                <el-table-column align="left" label="解绑">
                    <template #default="scope">
                        <span v-if="scope.row.status == 1" style="color:#4E7DF7;cursor: pointer;"
                            @click="removeSvg(scope.row.id)">解绑svg</span>
                    </template>
                </el-table-column>
            </el-table>
        </el-drawer>
        <el-dialog v-model="dialogVisible2" z-index="9999">
            <img w-full :src="dialogImageUrl2" alt="Preview Image" />
        </el-dialog>
        <!-- 位置信息 -->
        <el-drawer v-model="weizhiDialog" :size="1000" :before-close="handleClose6" :show-close="false"
            class="loudong-drawer">
            <template #header>
                <div class="flex justify-between items-center">
                    <span class="text-lg">地图定位</span>
                    <div>
                        <el-button @click="closeDialog6">取消</el-button>
                    </div>
                </div>
            </template>
            <el-form ref="searchForm" :inline="true">
                <el-form-item label="地址">
                    <el-input v-model="mapInfo.address" id="tipinput"></el-input>
                </el-form-item>
                <el-form-item label="">
                    <el-button type="primary" @click="search">搜索</el-button>
                </el-form-item>
                <el-form-item label="经度">
                    <el-input v-model="mapInfo.lng"></el-input>
                </el-form-item>
                <el-form-item label="纬度">
                    <el-input v-model="mapInfo.lat"></el-input>
                </el-form-item>
            </el-form>
            <div id="container"></div>
        </el-drawer>

        <!-- 房间列表 -->
        <el-drawer v-model="fangjianDialog" :size="1000" :before-close="handleClose7" :show-close="false"
            class="loudong-drawer">
            <template #header>
                <div class="flex justify-between items-center">
                    <span class="text-lg">房间信息</span>
                    <div>
                        <el-button @click="fangjianDialog = false">取消</el-button>
                        <el-button type="primary" @click="editRoom">确定</el-button>
                    </div>
                </div>
            </template>
            <div class="tabs">
                <div :class="currentLouCeng == index ? 'active tab' : 'tab'" v-for="(item, index) in loucengData"
                    @click="changeLouCeng(item, index)">{{ item.floor }}</div>
            </div>
            <div class="fangjian-action">
                <div @click="addFangJian">【添加房间】</div>
                <div class="right-action">
                    <!-- <div>【批量解绑】</div>
                    <div>【批量删除】</div> -->
                </div>
            </div>
            <el-table :data="fangjianData" row-key="id">
                <el-table-column align="left" label="房号/房名">
                    <template #default="scope">
                        <el-input v-model="scope.row.roomNo"></el-input>
                    </template>
                </el-table-column>
                <el-table-column align="left" label="房间面积（㎡）">
                    <template #default="scope">
                        <el-input v-model="scope.row.roomArea"></el-input>
                    </template>
                </el-table-column>
                <el-table-column align="left" label="使用单位" prop="usedUnit"></el-table-column>
                <el-table-column align="left" fixed="right" label="操作" min-width="100">
                    <template #default="scope">
                        <!-- <el-button type="primary" link icon="edit" @click="editQuanShu(scope.row)">
                            解绑
                        </el-button> -->
                        <el-button type="danger" link icon="delete" @click="delFangJian(scope.row)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-drawer>

        <!-- 添加房间 -->
        <el-drawer v-model="fjDialog" :size="1000" :before-close="handleClose8" :show-close="false"
            class="loudong-drawer">
            <template #header>
                <div class="flex justify-between items-center">
                    <span class="text-lg">新增房间</span>
                    <div>
                        <el-button @click="closeDialog8">取消</el-button>
                        <el-button type="primary" @click="confirmFj">确定</el-button>
                    </div>
                </div>
            </template>
            <el-button type="primary" icon="plus" @click="addFj">新增</el-button>
            <el-table :data="fangjianArr" row-key="id">
                <el-table-column align="left" label="房号/房名">
                    <template #default="scope">
                        <el-input v-model="scope.row.roomNo"></el-input>
                    </template>
                </el-table-column>
                <el-table-column align="left" label="房间面积（㎡）">
                    <template #default="scope">
                        <el-input v-model="scope.row.roomArea"></el-input>
                    </template>
                </el-table-column>
                <el-table-column align="left" label="备注">
                    <template #default="scope">
                        <el-input v-model="scope.row.notes"></el-input>
                    </template>
                </el-table-column>
                <el-table-column align="left" fixed="right" label="操作" min-width="100">
                    <template #default="{ scope, index }">
                        <el-button type="danger" link icon="delete" @click="deleteFj(scope.$index)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-drawer>
        <ldCard ref="cardRef"></ldCard>
    </div>
</template>
<script setup>
import {
    getAllBgqList,
    getLouDongList,
    deleteLouDong,
    createLouDong,
    updateLouDong,
    getQuanShuList,
    deleteQuanShu,
    createQuanShu,
    updateQuanShu,
    setPicture,
    getBuildingFloors,
    savePicture,
    removePicture,
    getFangJianList,
    deleteFangJian,
    createFangJian,
    updateFangJian
} from '@/api/shujuchuli'
import {
    getRegionList,
    buildingProperty,
    unitLedger
} from '@/api/unit'
import {qsdjList} from '@/utils/constant'
import { reactive, ref, onMounted, computed } from 'vue'
import { useAppStore } from "@/pinia";
import { useUserStore } from '@/pinia/modules/user'
import { ElMessage, ElMessageBox } from 'element-plus'
import AMapLoader from '@amap/amap-jsapi-loader'; //引入
import ldCard from '@/components/ldCard.vue'

defineOptions({
    name: 'Loudong'
})
const appStore = useAppStore()
const form = ref({
    areaId: '',
    address: '',
    main: 1,
    name: '',
    buildingNo: '',
    unitNo: '',
    administrative: '',
    ownership: '',
    createYear: '',
    source: 1,
    buildingType: 1,
    buildingUse: [],
    buildingStruct: 1,
    lift: 1,
    assetValue: '',
    tag: 1,
    totalArea: '',
    totalUseArea: '',
    coverArea: '',
    overgroundFloor: '',
    undergroundFloor: '',
    totalFloor: '',
    floorPosition: ''
})
const cardRef = ref(null)

function openCard(row){
  if(cardRef.value){
    cardRef.value.openCard(row)
  }
}
const totalFloor = computed(() => {
    return Number(form.value.overgroundFloor) + Number(form.value.undergroundFloor) || ''
})
const quanshuForms = ref({
    buildingArea: '',
    buildingId: '',
    certificateNo: '',
    commonSituation: '',
    erCode: '',
    landUseRightArea: '',
    map: '',
    obligee: '',
    otherRight: '',
    propertyCert: '',
    purpose: '',
    realEstateUnitNo: '',
    rightNature: '',
    rightType: '',
    serviceLife: '',
    splitting: ''
})
const props1 = {
    checkStrictly: true,
    label: 'name',
    value: 'name'
}


const ldytList = ref([])

const sources = ref([
    {
        label: '调剂',
        value: 1
    },
    {
        label: '置换',
        value: 2
    },
    {
        label: '租用',
        value: 3
    },
    {
        label: '建设',
        value: 4
    }
])
const buildingUses = ref([
    {
        label: '基本办公用房',
        value: 1
    },
    {
        label: '附属用房',
        value: 2
    },
    {
        label: '业务用房',
        value: 3
    },
    {
        label: '周转用房',
        value: 4
    },
    {
        label: '其他',
        value: 5
    }
])
const buildingStructs = ref([
    {
        label: '框架结构（框剪结构）',
        value: 1
    },
    {
        label: '砖木',
        value: 2
    },
    {
        label: '砖混',
        value: 3
    },
    {
        label: '钢结构',
        value: 4
    }
])
const searchInfo = ref({
    name: '',
    address: ''
})

const userStore = useUserStore()
const headerOdj = ref({ token: userStore.token })
const adminUrl = ref('')
adminUrl.value = import.meta.env.VITE_BASE_PATH + '/file/upload'
const page = ref(1)
const total = ref(0)
const pageSize = ref(10)
const dialogFormVisible = ref(false)

const quanshuDialog = ref(false)

const rules = reactive({
    name: [{ required: true, message: '请输入办公楼名称', trigger: 'blur' }],
    areaId: [{ required: true, message: '请选择所属办公区域', trigger: 'change' }],
    buildingNo: [{ required: true, message: '请输入楼栋号', trigger: 'blur' }],
    unitNo: [{ required: true, message: '请输入单元号', trigger: 'blur' }],
    administrative: [{ required: true, message: '请选择办公楼所属行政区划', trigger: 'change' }],
    ownership: [{ required: true, message: '请选择权属登记情况', trigger: 'change' }],
    createYear: [{ required: true, message: '请输入建设年代', trigger: 'blur' }],
    buildingUse: [{ required: true, message: '请选择楼栋用途', trigger: 'change' }],
    assetValue: [{ required: true, message: '请输入资产价值', trigger: 'blur' }],
    floorPosition: [{ required: true, message: '请输入楼层位置', trigger: 'blur' }],
    totalArea: [{ required: true, message: '请输入总建筑面积', trigger: 'blur' }],
    totalUseArea: [{ required: true, message: '请输入总使用面积', trigger: 'blur' }],
    coverArea: [{ required: true, message: '请输入占地面积', trigger: 'blur' }],
    overgroundFloor: [{ required: true, message: '请输入地上层数', trigger: 'blur' }],
    undergroundFloor: [{ required: true, message: '请输入地下层数', trigger: 'blur' }],
})
const quanshuRules = reactive({
    certificateNo: [{ required: true, message: '请输入产权证号', trigger: 'blur' }],
    obligee: [{ required: true, message: '请输入权利人', trigger: 'blur' }],
    commonSituation: [{ required: true, message: '请选择共有情况', trigger: 'change' }],
    buildingArea: [{ required: true, message: '请输入房屋建筑面积', trigger: 'blur' }]
})
let validateImage = (rule, value, callback) => {
    if (!waiguanForms.value.picture) {
        callback(new Error('请上传图片'))
    } else {
        callback()
    }
}
const waiguanRules = reactive({
    picture: [{ required: true, validator: validateImage, trigger: 'change' }],
})

const loudongForm = ref(null)
const quanshuForm = ref(null)
const initForm = () => {
    loudongForm.value.resetFields()
    form.value = {
        areaId: '',
        address: '',
        main: 1,
        name: '',
        buildingNo: '',
        unitNo: '',
        administrative: '',
        ownership: '',
        createYear: '',
        source: 1,
        buildingType: 1,
        buildingUse: [],
        buildingStruct: 1,
        lift: 1,
        assetValue: '',
        tag: 1,
        totalArea: '',
        totalUseArea: '',
        coverArea: '',
        overgroundFloor: '',
        undergroundFloor: '',
        totalFloor: '',
        floorPosition: ''
    }
    pids.value = []
}
const initQuanShuForm = () => {
    quanshuForm.value.resetFields()
    quanshuForms.value = {
        buildingArea: '',
        buildingId: '',
        certificateNo: '',
        commonSituation: '',
        erCode: '',
        landUseRightArea: '',
        map: '',
        obligee: '',
        otherRight: '',
        propertyCert: '',
        purpose: '',
        realEstateUnitNo: '',
        rightNature: '',
        rightType: '',
        serviceLife: '',
        splitting: ''
    }
    quanshuForms.value.buildingId = idsParam.value.buildingId
    fileList1.value = []
    fileList2.value = []
    fileList3.value = []
    fileList4.value = []
}

const isEdit = ref(false)
const dialogTitle = ref('新增办公楼')
const addLouDong = () => {
    dialogTitle.value = '新增办公楼'
    isEdit.value = false
    dialogFormVisible.value = true
}
const isQuanShuEdit = ref(false)
const quanshuTitle = ref('新增权属信息')
const quanshuVisible = ref(false)
const addQuanShu = () => {
    quanshuTitle.value = '新增权属信息'
    isQuanShuEdit.value = false
    quanshuVisible.value = true
}
const closeDialog = () => {
    initForm()
    dialogFormVisible.value = false
}
const closeDialog3 = () => {
    initQuanShuForm()
    quanshuVisible.value = false
}
const handleClose = (done) => {
    initForm()
    done()
}

const handleClose2 = (done) => {
    quanshuDialog.value = false
}
const handleClose3 = (done) => {
    quanshuVisible.value = false
}

const handleCurrentChange = (val) => {
    page.value = val
    getTableData()
}
const tableData = ref([])

const quanshuData = ref([])

// 查询
const getTableData = async () => {
    const res = await getLouDongList({
        pageNumber: page.value,
        pageSize: pageSize.value,
        ...searchInfo.value
    })
    if (res.code == 200) {
        tableData.value = res.result.data
        total.value = res.result.total
    }
}
const idsParam = ref({
    buildingId: ''
})
const getQuanShuData = async () => {
    const res = await getQuanShuList(idsParam.value.buildingId)
    if (res.code == 200) {
        quanshuData.value = res.result
    }
}
getTableData()
const qyList = ref([])
const areaList = ref([])
onMounted(() => {
    getAllBgqList().then(res => {
        qyList.value = res.result
    })
    getRegionList().then(res => {
        areaList.value = res.result
    })
})

const pids = ref([])
function changeArea(val) {
    form.value.address = qyList.value.find(item => item.id == val).address
}
const areaChange = (val) => {
    form.value.administrative = val[val.length - 1]
}
const searchAreaChange = (val) => {
    searchInfo.value.administrative = val[val.length - 1]
}
const enterDialog = async () => {
    loudongForm.value.validate(async (valid) => {
        if (valid) {
            if (Array.isArray(form.value.buildingUse)) {
                form.value.buildingUse = form.value.buildingUse.join(',')
            }
            form.value.totalFloor = totalFloor.value
            let res
            if (isEdit.value) {
                res = await updateLouDong(form.value)
            } else {
                res = await createLouDong(form.value)
            }
            if (res.code == 200) {
                ElMessage({
                    type: 'success',
                    message: isEdit.value ? '编辑成功' : '添加成功!'
                })
                getTableData()
            }
            initForm()
            dialogFormVisible.value = false
        }
    })
}
const enterDialog3 = async () => {
    quanshuForm.value.validate(async (valid) => {
        if (valid) {
            quanshuForms.value.buildingId = idsParam.value.buildingId
            let res
            if (isQuanShuEdit.value) {
                res = await updateQuanShu(quanshuForms.value)
            } else {
                res = await createQuanShu(quanshuForms.value)
            }
            if (res.code == 200) {
                ElMessage({
                    type: 'success',
                    message: isQuanShuEdit.value ? '编辑成功' : '添加成功!'
                })
                getQuanShuData()
            }
            initQuanShuForm()
            quanshuVisible.value = false
        }
    })
}
const delLouDong = () => {
    ElMessageBox.confirm(
        '确认删除?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }
    ).then(async () => {
        const res = await deleteLouDong(form.value.buildingId)
        if (res.code === 200) {
            ElMessage({
                type: 'success',
                message: '删除成功!'
            })
            dialogFormVisible.value = false
            getTableData()
        }
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '已取消删除'
        })
    })
}

const delQuanShu = (row) => {
    ElMessageBox.confirm(
        '确认删除?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }
    ).then(async () => {
        const res = await deleteQuanShu(row.id)
        if (res.code === 200) {
            ElMessage({
                type: 'success',
                message: '删除成功!'
            })
            getQuanShuData()
        }
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '已取消删除'
        })
    })
}
const delFangJian = (row) => {
    ElMessageBox.confirm(
        '确认删除?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }
    ).then(async () => {
        const res = await deleteFangJian(row.id)
        if (res.code === 200) {
            ElMessage({
                type: 'success',
                message: '删除成功!'
            })
            getFangJianData()
        }
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '已取消删除'
        })
    })
}
const editLouDong = async (row) => {
    isEdit.value = true
    dialogTitle.value = '修改楼栋信息'
    form.value = JSON.parse(JSON.stringify(row))
    form.value.buildingId = form.value.id
    form.value.address = form.value.areaAddress
    form.value.buildingUse = form.value.buildingUse.split(',')
    if (row.administrative) {
        pids.value = getPids(row.administrative)
    }
    dialogFormVisible.value = true
}
const editQuanShu = async (row) => {
    isQuanShuEdit.value = true
    quanshuTitle.value = '修改权属信息'
    quanshuForms.value = JSON.parse(JSON.stringify(row))
    quanshuForms.value.ownershipId = quanshuForms.value.id
    if (quanshuForms.value.propertyCert) {
        fileList1.value = [{
            name: '1',
            url: quanshuForms.value.propertyCert
        }]
    }
    if (quanshuForms.value.map) {
        fileList2.value = [{
            name: '1',
            url: quanshuForms.value.map
        }]
    }
    if (quanshuForms.value.splitting) {
        fileList3.value = [{
            name: '1',
            url: quanshuForms.value.splitting
        }]
    }
    if (quanshuForms.value.erCode) {
        fileList4.value = [{
            name: '1',
            url: quanshuForms.value.erCode
        }]
    }
    quanshuVisible.value = true
}

function getPids(val) {
    let res = []
    areaList.value.forEach(m => {
        if (m.name == val) {
            res.push(val)
        }
        if (m.children) {
            m.children.forEach(n => {
                if (n.name == val) {
                    res.push(m.name, n.name)
                }
                if (n.children) {
                    n.children.forEach(o => {
                        if (o.name == val) {
                            res.push(m.name, n.name, o.name)
                        }
                    })
                }
            })
        }
    })
    return res
}
const onSubmit = () => {
    page.value = 1
    getTableData()
}

const onReset = () => {
    searchInfo.value = {

    }
    getTableData()
}
const openQuanShu = (id) => {
    quanshuDialog.value = true
    idsParam.value.buildingId = id
    getQuanShuData()
}
const openWaiGuan = (row) => {
    waiguanVisible.value = true
    waiguanForms.value.buildingId = row.id
    if (row.picture) {
        fileList5.value = [{
            name: '1',
            url: row.picture
        }]
    }
}
const waiguanForm = ref(null)
const waiguanForms = ref({
    buildingId: '',
    picture: ''
})

const waiguanVisible = ref(false)
const handleClose4 = () => {
    waiguanVisible.value = false
}
const closeDialog4 = () => {
    waiguanVisible.value = false
}

const enterDialog4 = () => {
    waiguanForm.value.validate(async (valid) => {
        if (valid) {
            let res = await setPicture(waiguanForms.value)
            if (res.code == 200) {
                ElMessage({
                    type: 'success',
                    message: '添加成功!'
                })
                getTableData()
            }
            //initForm()
            waiguanVisible.value = false
        }
    })
}
const loucengData = ref([])
const getLouCengData = async (val) => {
    const res = await getBuildingFloors(loucengForms.value.buildingId)
    if (res.code == 200) {
        loucengData.value = res.result
        if (val == 'floorId') {
            fangjianForms.value.floorId = loucengData.value[currentLouCeng.value].id
            getFangJianData()
        }
    }
}
const loucengDialog = ref(false)
const handleClose5 = () => {
    loucengDialog.value = false
}
const loucengForms = ref({
    buildingId: ''
})
const openLouCeng = (id) => {
    loucengForms.value.buildingId = id
    loucengDialog.value = true
    getLouCengData()
}
const weizhiDialog = ref(false)
const handleClose6 = () => {
    mapInfo.value = {
        address: '',
        lng: '',
        lat: ''
    }
    weizhiDialog.value = false
}
const closeDialog6 = () => {
    mapInfo.value = {
        address: '',
        lng: '',
        lat: ''
    }
    weizhiDialog.value = false
}
const openWeiZhi = (item) => {
    weizhiDialog.value = true
    let location = item.administrative
    //初始化地图信息
    initMap(location)
}
const map = ref(null)
const AMaps = ref(null)
let geocoder = null; // 地图编码转换器
const initMap = (address) => {
    window._AMapSecurityConfig = {
        securityJsCode: "f84f4022a6c10294d1b19ff9b77c31c5",
    };
    AMapLoader.load({
        key: "c1c5d63a1bfa553591a271f0cb521fc1", //此处填入我们注册账号后获取的Key
        version: "2.0", //指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Geocoder"], //需要使用的的插件列表，如比例尺'AMap.Scale'等
    }).then((AMap) => {
        AMaps.value = AMap
        geocoder = new AMap.Geocoder({
            city: address, // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
        })
        geocoder.getLocation(address, function (status, result) {
            if (status === "complete" && result.info === "OK") {
                let location = [
                    result.geocodes[0].location.lng,
                    result.geocodes[0].location.lat,
                ];
                map.value = new AMap.Map("container", {
                    zoom: 12, //初始化地图层级
                    center: location, //初始化地图中心点
                }); // 展示地图 map
                map.value.on("click", function (e) {
                    var lngLat = e.lnglat;
                    mapInfo.value.lng = lngLat.lng;
                    mapInfo.value.lat = lngLat.lat;
                    // let marker = new AMap.Marker({
                    //     position: new AMap.LngLat(lng, lat)
                    // })
                    // this.map.clearMap()// 清除所有覆盖物（点标志）
                    // this.map.add(marker)// 添加点标志
                })
            }
        });
    }).catch(e => {
        console.log(e);
    })
}
const mapInfo = ref({
    address: '',
    lng: '',
    lat: ''
})

const search = () => {
    AMaps.value.plugin('AMap.PlaceSearch', () => {
        var placeSearch = new AMaps.value.PlaceSearch({
            map: map.value,
            pageSize: 1, // 单页显示结果条数
            pageIndex: 1, // 页码
            //autoFitView: true //是否自动调整地图视野使绘制的 Marker 点都处于视口的可见范围
        })
        placeSearch.search(mapInfo.value.address, function (status, result) {
            map.value.clearMap()// 清除所有覆盖物（点标志）
            var pois = result.poiList.pois;
            var poi = pois[0];
            var marker = new AMaps.value.Marker({
                position: poi.location,   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                title: poi.name
            })
            map.value.add(marker)
            let infoWindow = new AMaps.value.InfoWindow({
                isCustom: true, //是否自定义信息窗体
                content: `<div style="background-color: white;padding: 0 5px; border-radius: 5px;border: 1px solid #cccccc;"> 地址：${poi.name}</div>`,
                closeWhenClickMap: true,
                zIndex: 999,
                offset: new AMaps.value.Pixel(16, -35)
            });
            infoWindow.open(map.value, marker.getPosition());
            map.value.setFitView();

            // mapInfo.value.lng = lngLat.lng;
            // mapInfo.value.lat = lngLat.lat;
            // marker添加地图上
            // marker.value = new AMaps.value.Marker({
            //     position: [result.poiList.pois[0].location.lng, result.poiList.pois[0].location.lat]
            // });
            // const infoWindow = new AMaps.value.InfoWindow({
            //     content: `<div style="">${result.poiList.pois[0].name}</div>`, // 设置气泡内容
            //     offset: new AMaps.value.Pixel(0, -30) // 设置气泡偏移量，使其位于标记点正上方
            // });
            // infoWindow.open(map.value, marker.value.getPosition()); // 在地图上打开信息窗口，并指定打开的位置为标记点的位置
            //map.value.add(marker.value); //添加到地图
        })
    })
}

const fileList1 = ref([])
const handleRemove1 = (file) => {
    fileList1.value = []
    quanshuForms.value.propertyCert = ''
}
const uploadSuccess1 = (res) => {
    if (res.code != 200) {
        ElMessage({
            type: 'warning',
            message: res.message
        })
        fileList1.value.pop()
        return
    }
    quanshuForms.value.propertyCert = res.result
}
const fileList2 = ref([])
const handleRemove2 = (file) => {
    fileList2.value = []
    quanshuForms.value.map = ''
}
const uploadSuccess2 = (res) => {
    if (res.code != 200) {
        ElMessage({
            type: 'warning',
            message: res.message
        })
        fileList2.value.pop()
        return
    }
    quanshuForms.value.map = res.result
}
const fileList3 = ref([])
const handleRemove3 = (file) => {
    fileList3.value = []
    quanshuForms.value.splitting = ''
}
const uploadSuccess3 = (res) => {
    if (res.code != 200) {
        ElMessage({
            type: 'warning',
            message: res.message
        })
        fileList3.value.pop()
        return
    }
    quanshuForms.value.splitting = res.result
}
const fileList4 = ref([])
const handleRemove4 = (file) => {
    fileList4.value = []
    quanshuForms.value.erCode = ''
}
const uploadSuccess4 = (res) => {
    if (res.code != 200) {
        ElMessage({
            type: 'warning',
            message: res.message
        })
        fileList4.value.pop()
        return
    }
    quanshuForms.value.erCode = res.result
}
const fileList5 = ref([])
const handleRemove5 = (file) => {
    fileList5.value = []
    waiguanForms.value.picture = ''
}
const uploadSuccess5 = (res) => {
    if (res.code != 200) {
        ElMessage({
            type: 'warning',
            message: res.message
        })
        fileList5.value.pop()
        return
    }
    waiguanForms.value.picture = res.result
    waiguanForm.value.validateField('picture')
}
const svgUrl = ref('')
svgUrl.value = import.meta.env.VITE_BASE_PATH + '/manager/building/floor/save/picture'
const fileList6 = ref([])
const uploadSuccess6 = (res, row) => {
    fileList6.value = []
    if (res.code != 200) {
        ElMessage({
            type: 'warning',
            message: res.message
        })
        fileList6.value.pop()
        return
    }
    // waiguanForms.value.picture = res.result
    // waiguanForm.value.validateField('picture')
    savePicture({ floorId: row.id, picture: res.result }).then(result => {
        getLouCengData()
    })
}
const removeSvg = (id) => {
    ElMessageBox.confirm(
        '确认解绑?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }
    ).then(async () => {
        const res = await removePicture(id)
        if (res.code === 200) {
            ElMessage({
                type: 'success',
                message: '解绑成功!'
            })
            getLouCengData()
        }
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '已取消解绑'
        })
    })
}
let dialogVisible = ref(false)
let dialogImageUrl = ref()

//图片预览
const handlePicturePreview = (file, files) => {
    dialogImageUrl.value = file.url;
    dialogVisible.value = true
}

const fangjianData = ref([])
const fangjianForms = ref({
    floorId: ''
})
const getFangJianData = async () => {
    const res = await getFangJianList(fangjianForms.value.floorId)
    if (res.code == 200) {
        fangjianData.value = res.result
    }
}
const fangjianDialog = ref(false)
const handleClose7 = () => {
    fangjianDialog.value = false
}
const openFangJian = (id) => {
    loucengForms.value.buildingId = id
    getLouCengData('floorId')
    fangjianDialog.value = true
}
const fjDialog = ref(false)
const handleClose8 = () => {

    fjDialog.value = false
}
const closeDialog8 = () => {
    fangjianArr.value = []
    fjDialog.value = false
}
const fangjianArr = ref([])
const addFangJian = () => {
    fjDialog.value = true
}
const addFj = () => {
    fangjianArr.value.push({
        floorId: loucengData.value[currentLouCeng.value].id,
        roomNo: '',
        roomArea: '',
        notes: ''
    })
}
const confirmFj = async () => {
    let res = await createFangJian({ rooms: fangjianArr.value })
    if (res.code == 200) {
        ElMessage({
            type: 'success',
            message: '添加成功!'
        })
        fangjianArr.value = []
        fjDialog.value = false
        getFangJianData()
    }
}

const deleteFj = (index) => {
    fangjianArr.value.splice(index, 1)
}
const editRoom = async () => {
    let params = fangjianData.value.map(item => {
        return {
            floorId: item.floorId,
            notes: item.notes,
            roomArea: item.roomArea,
            roomId: item.id,
            roomNo: item.roomNo,
            usedUnit: item.usedUnit
        }
    })
    let res = await updateFangJian({ rooms: params })
    if (res.code == 200) {
        ElMessage({
            type: 'success',
            message: '保存成功!'
        })
        fangjianDialog.value = false
        getTableData()
    }
}
const dialogVisible2 = ref(false)
const dialogImageUrl2 = ref('')
const yulan = (url) => {
    dialogVisible2.value = true
    dialogImageUrl2.value = url
}

const currentLouCeng = ref(0)
const changeLouCeng = (item, index) => {
    currentLouCeng.value = index
    fangjianForms.value.floorId = item.id
    getFangJianData()
}
function downloadImg(url) {
    const x = new window.XMLHttpRequest();
    x.open('GET', url, true);
    x.responseType = 'blob';
    x.onload = () => {
        const url = window.URL.createObjectURL(x.response);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'download.png';
        a.click();
    };
    x.send();
}

const syxx = ref(null)
const tabChange = () => {
    //syxx.value&&syxx.value.scrollIntoView({ behavior: 'smooth', block: 'start' })
}

const formattedYt = (val) => {
    let res = []
    let arr = val.split(',')
    arr.forEach(item => {
        let obj = buildingUses.value.find(m => m.value == item)
        if (obj) {
            res.push(obj.label)
        }
    })
    return res.join(',')
}

</script>

<style lang="scss">
.gva-table-box {
    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left {
            display: flex;
            align-items: center;

            .result {
                width: 60px;
                height: 26px;
                border-radius: 26px;
                display: flex;
                justify-content: center;
                align-items: center;
                color: #0256ff;
                background-color: #E5EEFF;
                margin-right: 6px;
            }

            .blue {
                color: #0256ff;
                margin-left: 4px;
            }
        }
    }

    .list {
        .item {
            display: flex;
            background-color: rgba(229, 238, 255, 0.4);
            padding: 10px;
            margin: 10px 0;

            .left {
                width: 280px;
                height: 180px;
                margin-right: 10px;
            }

            .right {
                flex: 1;

                .area-title {
                    font-size: 16px;
                    color: #333333;
                    font-weight: bold;
                    padding-bottom: 10px;
                    border-bottom: 1px solid #E7ECF1;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                }

                .info-block {
                    display: flex;

                    .info-item {
                        height: 30px;
                        margin-right: 5px;
                        flex: 1;
                        display: flex;
                        align-items: center;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;

                        .label {
                            font-size: 14px;
                            color: #606266;
                            line-height: 20px;
                        }

                        .info {
                            flex: 1;
                            font-size: 14px;
                            color: #303133;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;

                            .unit {
                                font-size: 12px;
                                color: #606266;
                            }
                        }
                    }
                }

                .link-tile-list {
                    width: 100%;
                    display: flex;

                    .link-tile {
                        font-size: 14px;
                        color: #4E7DFD;
                        min-width: 72px;
                        padding: 0 20px;
                        line-height: 26px;
                        height: 26px;
                        border-radius: 6px;
                        border: 1px solid #4E7DFD;
                        background: #FFFFFF;
                        text-align: center;
                        cursor: pointer;
                        margin-top: 10px;
                        margin-right: 10px;
                    }
                }
            }
        }
    }
}

.loudong-drawer {
    .section-title {
        font-weight: bold;
        font-size: 20px;
        line-height: 33px;
        padding: 8px 0 4px 14px;
        color: #4E7DFD;
        border-bottom: 1px solid #E7ECF1;
        position: relative;
        margin-bottom: 20px;
    }

    .section-title:before {
        content: '';
        position: absolute;
        top: 17px;
        left: 0;
        width: 6px;
        height: 14px;
        border-radius: 3px;
        background: #4E7DFD;
    }
}

.quanshu-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    border-bottom: 1px solid #E7ECF1;

    div {
        font-size: 20px;
    }

    .section-title {
        margin: 0;
        border: none;
    }
}

.tabs {
    display: flex;

    .tab {
        cursor: pointer;
        padding: 0 16px 10px 16px;
    }

    .active {
        border-bottom: 2px solid #4E7DF7;
    }
}

.fangjian-action {
    display: flex;
    justify-content: space-between;
    margin: 10px 0;
    color: #4E7DF7;
    cursor: pointer;

    .right-action {
        display: flex;
    }
}

#container {
    width: 100%;
    height: 100%;
}
</style>